import React, { Component } from "react";
import PageHeader from "../components/PageHeader";
import CommodityCard from "../components/CommodityCard";
import "../assets/css/SearchResult.css";
import Loading from "../components/Loading";

class SearchResult extends Component {
  constructor(props) {
    super(props);

    this.state = {
      keyWord: null,
      resultList: null,
    };
  }

  componentWillMount() {
    var keyword = this.props.match.params.keyword;
    this.$axios
      .get("/search", {
        params: {
          name: keyword,
        },
      })
      .then((res) => {
        this.setState({
          resultList: res.data.result,
        });
      });
  }

  render() {
    return (
      <div className="SearchResult">
        <PageHeader>
          <span slot="title">搜索结果</span>
        </PageHeader>
        {this.state.resultList ? (
          <ul className="search_result">
            {this.state.resultList && this.state.resultList.length > 0 ? (
              this.state.resultList.map((item) => {
                return (
                  <CommodityCard item={item} key={item.id}></CommodityCard>
                );
              })
            ) : (
              <li className="noCommodity">暂无相关商品</li>
            )}
          </ul>
        ) : (
          <Loading></Loading>
        )}
      </div>
    );
  }
}

export default SearchResult;
